import React, { Component } from 'react'
import { FormattedMessage } from 'react-intl'
import { Button, Toast } from 'antd-mobile'
import { DirectionType, LimitOrStop } from './'
import { ChoseButton } from 'component/position'
import { helper, config, myFetch } from '../utils'
import Reflux from 'reflux'
import { PriceAction } from '../../actions'
import { PriceStore } from '../../stores'

export default class OrderOce extends Reflux.Component {
    constructor(props) {
    super(props)
    this.state = {
      direction: 1,
      pric: 0, 
      pric1: 0,
    }
    this.store = PriceStore
    this.storeKeys = ['sellPrice', 'buyPrice']
  }

  componentDidMount() {
    PriceAction.changePrice(this.props.data.pair, helper.accMul(this.props.data.amn, 1000))
  }
  componentWillUnmount() {
    PriceAction.clearTimeout()
  }
  onOrderPrice = () => {
    let orderPrice 
    if (this.state.direction == 0) {
      orderPrice = this.state.sellPrice
    } else if (this.state.direction == 1 ) {
      orderPrice = this.state.buyPrice
    }
    return orderPrice
  }
  onTimesChange = (e) => {
    if (e === 'undefined') {
      return
    }
    this.setState({
      pric: e
    })
  }
  onTimesChange1 = (e) => {
    if (e === 'undefined') {
      return
    }
    this.setState({
      pric1: e
    })
  }
  onChangeDirection = (i) => {
    this.setState({
      direction: i,
      pric: 0,
      pric1: 0
    })
  }
  onConfirmClick = () => {
    const options = {
      method: 'POST',
      body: JSON.stringify({
        PAIR: this.props.data.pair,
        BSKB: this.state.direction,
        AMNT: helper.accMul(this.props.data.amn, 1000),
        YKKB: helper.requestTime(this.props.data.ykk),
        PRI1: this.state.pric ? this.state.pric : this.onOrderPrice(),
        PRI2: this.state.pric1 ? this.state.pric1 : this.onOrderPrice(),
        SKJ2: 4,
        OFLG: 1
      })
    }
    myFetch(`${config.rootApi}/mOrderoco`, options, true)
     .then((rs) => {
      if (rs && rs.statusCode == '0') {
          Toast.success('挂单成功')
        }
     })
  }
  render() {
    const { direction } = this.state
    return (
      <div className="rt-order-ifo">
        <div className="rt-padding-24">
          <div className="rt-order-title">
            <FormattedMessage id="trade1"/>
            <FormattedMessage id="direction"/>
          </div>
          <DirectionType
            onChange={this.onChangeDirection}
          />
        </div>
        <div className="rt-height22 -background"></div>
          <div className="rt-padding-24">
            <div className="rt-order-title">
              <FormattedMessage id="mainsetting"/>
            </div>
            <LimitOrStop
              defaultCon={3}
              orderPrice={this.onOrderPrice()}
              onTimesChange={this.onTimesChange}
              direction={direction}
              ccy={this.props.data.pair}
            />
            <div className="rt-order-title">
              <FormattedMessage id="copysetting"/>
            </div>
            <LimitOrStop
              defaultCon={4}
              orderPrice={this.onOrderPrice()}
              onTimesChange={this.onTimesChange1}
              direction={direction}
              ccy={this.props.data.pair}
            />
          <ChoseButton
            onConfirmClick={
              this.onConfirmClick
            }
          />
          </div>
      </div>
    )
  }
}